<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 History 模式</title>
    <script src="https://unpkg.com/vue@2.7.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app1" style="border: 1px dashed red;margin-bottom: 2px;">
      <router-link to="/user/a001">to /user/a001</router-link><br />
      <router-link to="/user2/a002">to /user2/a002</router-link><br />
      <router-view></router-view>
    </div>

    <script type="text/javascript">
      
      const User = {template: '<div>User: {{$route.params.id}}</div>'}
      const NotFoundComponent = {template: '<div>NotFound</div>'}
      
      const router = new VueRouter({
        mode: 'history',
        routes: [
          {path: '/user/:id', component: User},
          // 警告
          {path: '*', component: NotFoundComponent}
        ]
      })
      
      const vm1 = new Vue({
        el: '#app1',
        router
      })
      
      // 后端配置例子
      //   nginx的try_files的说明链接：https://blog.csdn.net/qq_24861509/article/details/102716191
    </script>
  </body>
</html>